//引入axios
import axios from "axios";

//引入进度条和进度条样式
import nProgress from "nprogress";
import "nprogress/nprogress.css";

//通过process.env拿到不同环境下的变量
// console.log(process.env);


//创建一个axios实例(请求开发环境)
const request = axios.create({
    //公共路径
    baseURL: process.env.VUE_APP_MOCKAPI,
    //超时时间
    timeout: 10000
})


//给实例配置拦截器
request.interceptors.request.use(
    //config：是axios请求的配置对象
    //拦截器中逻辑完成后，必须把config配置对象再返回出去，否则请求无法继续进行
    (config) => {
        //发送请求触发进度条启动
        nProgress.start()

        return config
    }, 

    //进入处理失败的回调函数有两种方法：1.请求拦截器可以设置多个，当上一次失败的就会进入当此的失败函数  
    //2.给拦截器传入额外的参数，主动进入
    (error) => {
        //如果拦截器错误的请求下,我们要返回一个失败的promise实例
        //为什么要返回失败的promise实例????? 因为拦截器最终的返回结果是通过then方式返回的,
        //then或catch只有再返回失败的promise实例的时候,then或catch才是失败状态,如果返回的是一个值那么就是成功状态
       
        //触发响应以后，进度条结束
        nProgress.done()
        return Promise.reject(error);
    }
)

request.interceptors.response.use(

    //response是请求回来axios组装的数据,其中data属性是服务端响应的数据
    //我们一定要在响应拦截器中返回一个数据,否则axios方法无法得到数据
    (response) => {
        //触发响应以后，进度条结束
        nProgress.done()

        //响应成功才返回数据 否则返回失败的Promise实例值为错误信息
        if(response.data.code === 200){
            return response.data.data;
        } else{
            //自己封装一个错误对象
            return Promise.reject({message: request.data.message})
        }
    }, 

    (error) => {
        //触发响应以后，进度条结束
        nProgress.done()
        
        //当响应失败,则处理失败情况,要返回一个失败的priomise实例
        return Promise.reject(error)
    }
)

export default request


